//表格
Vue.component('vanTable',{
    props:['columns','data'],
    template:`<table border="1" cellpadding="20" cellspacing="0">
        <tr>
            <th v-for="item in columns">{{item.title}}</th>
        </tr>

        <tr v-for="item in data">
            <td v-for="col in columns">
                {{item[col.key]}}
            </td>       
             </tr>
    </table>`
})


//弹框
Vue.component('van-tips',{
    props:{
        title:String,
        show:Boolean,
    },
    template:`<div class="van-tips" v-show="show">{{title}}</div>`
})


//loading
Vue.component('van-loading',{
    props:{
        show:Boolean
    },
    template:`<div class="van-loading" v-show="show">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    </div>`
})

//按钮
Vue.component('vanButton',{
    props:{
        title:String,
        type:{
            type:String,
            validator(val){
                 // return false 控制台会有一个提示 告诉你有瑕疵
        return ['lightcoral', 'grey'].indexOf(val) != -1  // 不等于-1 找打了 true   等于-1找不到 false
            }
        }
     },
     template:`<button @click="$emit('click')" class="van-button" :style="{background:type}">{{title}}</button>`
})

//导航栏组件
Vue.component('vanNavBar',{
    props:['title'],
    template:`<div class="van-nav-bar">
        <span @click="$emit('click-left')">&lt;返回</span>
        <span>{{title}}</span>
        <span @click="$emit('click-right')">搜索</span>
    </div>`
})